import * as React from "react";
import {
  Image,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import LinearGradient from "react-native-linear-gradient";
//UI组件库
import { Provider } from "@ant-design/react-native";
//引入工具类
import app from "../utils/util";

import Type from './Type';


//组件
import Banner from "../components/Banner";
import Index_list from "../components/index_list";




export default class Index extends React.Component {

  constructor() {
    super();
    this.state = {
      time_name: "",
    };

  }

  componentDidMount() {
    if (new Date().getHours() >= 0 && new Date().getHours() <= 5) {
      this.setState({
        time_name: "深夜，饿了吗吃点什么吧！",
      });
    } else if (new Date().getHours() >= 5 && new Date().getHours() <= 9) {
      this.setState({
        time_name: "早上好，早餐想吃点什么？",
      });
    } else if (new Date().getHours() >= 9 && new Date().getHours() <= 13) {
      this.setState({
        time_name: "上午好，今天想吃点什么？",
      });
    } else if (new Date().getHours() >= 13 && new Date().getHours() <= 18) {
      this.setState({
        time_name: "下午好，今天想吃点什么？",
      });
    } else if (new Date().getHours() >= 18 && new Date().getHours() <= 0) {
      this.setState({
        time_name: "晚上好，准备吃点什么呢？",
      });
    }
  }

  render() {
    return (
      <View style={styles.box}>
        <Provider>
          {/*首页上半部分*/}
          <View style={{ flex: 1.8 }}>
            {/*渐变背景*/}
            <LinearGradient colors={["#FF7911", "#FFBA31"]} style={styles.top_bg} start={{ x: 0.0, y: 1 }}
                            end={{ x: 1, y: 0.0 }}>
              <View style={{ marginTop: app.Bar }}>
                {/*顶部标题*/}
                <Text style={styles.top_title}>{this.state.time_name}</Text>
                {/*搜索栏*/}
                <View style={{ alignItems: "center" }}>
                  <View style={styles.search}>
                    <Image style={styles.search_img} source={require("../img/search.png")} />
                    <Text style={styles.search_content}>搜索食谱/食材</Text>
                  </View>
                </View>
              </View>
            </LinearGradient>
            {/*轮播图*/}
            <Banner />

          </View>

          {/*首页下半部分*/}
          <View style={styles.bottom_box}>
            {/*标题栏*/}
            <View style={styles.bottom_bar}>
              <View style={styles.bottom_title}>
                <View style={styles.bottom_line}></View>
                <Text style={styles.bottom_title_content}>今日推荐</Text>
              </View>
              {/*更多点击*/}
              <TouchableOpacity  onPress={() =>
                this.props.navigation.navigate('Type')}>
                <View style={styles.bottom_more_title}>
                  <Text style={{ color: "#A7A8AC" }}>更多</Text>
                  <Image style={styles.bottom_more} source={require("../img/more.png")} />
                </View>
              </TouchableOpacity>
            </View>
            {/*首页列表*/}
            <Index_list />

          </View>
        </Provider>
      </View>
    );
  }
}






const styles = StyleSheet.create({
  box: {
    width: "100%",
    height: "100%",
  },
  top_bg: {
    height: 300,
    borderBottomRightRadius: 80,
    borderBottomLeftRadius: 80,
    zIndex: -998,
  },
  top_title: {
    color: "#f1f2f6",
    marginLeft: 10,
    marginTop: 10,
    fontSize: 20,
    fontWeight: "bold",
  },
  search_content: {
    color: "rgba(241,242,246,0.7)",
    fontSize: 15,
  },
  bottom_box: {
    flex: 2,
    zIndex: -999,
  },
  bottom_bar: {
    marginTop: 60,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  bottom_line: {
    height: 20,
    width: 5,
    backgroundColor: "#FF8120",
  },
  bottom_title: {
    flexDirection: "row",
    alignItems: "center",
    marginLeft: 10,
  },
  bottom_title_content: {
    color: "#2f3542",
    fontSize: 20,
    marginLeft: 5,
  },
  bottom_more: {
    width: 25,
    height: 25,
    marginRight: 5,
  },
  bottom_more_title: {
    flexDirection: "row",
    alignItems: "center",
  },
  search: {
    width: app.w * 0.85,
    height: 35,
    backgroundColor: "rgba(255,255,255,0.5)",
    borderRadius: 25,
    marginTop: 20,
    flexDirection: "row",
    alignItems: "center",
  },
  search_img: {
    width: 25,
    height: 25,
    marginLeft: 10,
    marginRight: 8,
  },
});


